<template>
  <div class="updatePrice">
    <div class="ele-title-1"><h4>订单改价</h4></div>
    <div class="order-form">
      <el-form :model="orderForm">
        <el-row>
          <el-form-item>
            <h4>{{ orderStore }}</h4>
          </el-form-item>
          <el-form-item label="运费：">
            <span>{{ freight }}</span>
          </el-form-item>
          <el-form-item label="修改运费" prop="newFreight">
            <el-row>
              <el-col :span="10">
                <el-input v-model="orderForm.newFreight" @keyup.native="changeFreight" />
              </el-col>
            </el-row>

          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div v-if="type == 'sale'">
      <el-table
        :data="orderForm.goodsList"
        class="ele-table"
        :header-cell-style="hearderCellStyle"
      >
        <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
          <template slot-scope="scope">
            <img
              :src="scope.row.goodsPic"
              width="80"
              height="80"
              alt="加载失败"
            >
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" width="250" fixed="left">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.goodsName }}</span>
              <span
                v-if="scope.row.deviceType == '1'"
                class="custom"
              >软链</span>
              <span
                v-if="scope.row.deviceType == '2'"
                class="custom"
              >医柜</span>
            </div>
            <div>{{ scope.row.goodsSpec }}</div>
            <div>{{ scope.row.deviceNo }}</div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price" width="200">
          <template slot-scope="scope">
            {{ '￥' + scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="number" width="200">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <!--        <el-table-column label="押金" prop="depositPrice" width="100">
          <template slot-scope="scope">
            {{ scope.row.depositPrice + '元' }}
          </template>
        </el-table-column>-->
        <el-table-column label="类型" prop="goodsType" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsType == 'lease'">租赁</span>
            <span v-else>售卖</span>
          </template>
        </el-table-column>
        <el-table-column label="运费" width="100">
          <template slot-scope="scope">
            <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
            <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
            <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
            <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
            <p>{{ scope.row.freightPrice }}</p>
          </template>
        </el-table-column>
        <el-table-column label="优惠" />
        <el-table-column label="合计" prop="totalPrice" width="100">
          <template slot-scope="scope">
            {{ '￥' + scope.row.totalPrice }}
          </template>
        </el-table-column>
        <el-table-column label="修改售价" width="100">
          <template slot-scope="scope">
            <el-input v-model.trim="scope.row.price" @keyup.native="changePrice(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
      <div class="ele-bzm">
        <p>备注:{{ remark || '无备注' }}</p>
        <p class="ele-p-right">
          <span>子订单号:{{ orderSn }}</span><span>门店:{{ orderStore }}</span>
        </p>
      </div>
    </div>
    <div v-if="type == 'lease'">
      <el-table
        :data="orderForm.goodsList"
        class="ele-table"
        :header-cell-style="hearderCellStyle"
      >
        <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">
          <template slot-scope="scope">
            <img
              :src="scope.row.goodsPic"
              width="80"
              height="80"
              alt="加载失败"
            >
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" width="250" fixed="left">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.goodsName }}</span>
              <span
                v-if="scope.row.deviceType == '1'"
                class="custom"
              >软链</span>
              <span
                v-if="scope.row.deviceType == '2'"
                class="custom"
              >医柜</span>
            </div>
            <div>{{ scope.row.goodsSpec }}</div>
            <div>{{ scope.row.deviceNo }}</div>
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="price" width="200">
          <template slot-scope="scope">
            {{ '￥' + scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="number" width="200">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column label="押金" prop="depositPrice" width="100">
          <template slot-scope="scope">
            {{ scope.row.depositPrice + '元' }}
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="goodsType" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsType == 'lease'">租赁</span>
            <span v-else>售卖</span>
          </template>
        </el-table-column>
        <el-table-column label="运费" width="100">
          <template slot-scope="scope">
            <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>
            <p v-if="scope.row.deliverySn == 'self'">自提配送</p>
            <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>
            <p v-if="scope.row.deliverySn == 'urgent'">加急</p>
            <p>{{ scope.row.freightPrice }}</p>
          </template>
        </el-table-column>
        <el-table-column label="优惠" />
        <el-table-column label="租期">
          <tempalte>
            <span>——</span>
          </tempalte>
        </el-table-column>
        <el-table-column label="合计" prop="totalPrice" width="100">
          <template slot-scope="scope">
            {{ '￥' + scope.row.totalPrice }}
          </template>
        </el-table-column>
      </el-table>
      <div class="ele-bzm">
        <p>备注:{{ remark || '无备注' }}</p>
        <p class="ele-p-right">
          <span>子订单号:{{ orderSn }}</span><span>门店:{{ orderStore }}</span>
        </p>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" @click="submitOrderForm">提交</el-button>
    </div>
    <!--    <div v-for="(item, index) in goodsList" :key="index">-->
    <!--      <div v-if="item.goodsType === 'lease'">-->
    <!--        <el-table-->
    <!--          :data="item.goodsList"-->
    <!--          class="ele-table"-->
    <!--          :header-cell-style="hearderCellStyle"-->
    <!--        >-->
    <!--          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">-->
    <!--            <template slot-scope="scope">-->
    <!--              <img-->
    <!--                :src="scope.row.goodsPic"-->
    <!--                width="80"-->
    <!--                height="80"-->
    <!--                alt="加载失败"-->
    <!--              >-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column prop="goodsName" width="250" fixed="left">-->
    <!--            <template slot-scope="scope">-->
    <!--              <div>-->
    <!--                <span>{{ scope.row.goodsName }}</span>-->
    <!--                <span-->
    <!--                  v-if="scope.row.deviceType == '1'"-->
    <!--                  class="custom"-->
    <!--                >软链</span>-->
    <!--                <span-->
    <!--                  v-if="scope.row.deviceType == '2'"-->
    <!--                  class="custom"-->
    <!--                >医柜</span>-->
    <!--              </div>-->
    <!--              <div>{{ scope.row.goodsSpec }}</div>-->
    <!--              <div>{{ scope.row.deviceNo }}</div>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="单价" prop="price" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ '￥' + scope.row.price }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="数量" prop="number" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ scope.row.number }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="押金" prop="depositPrice" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ scope.row.depositPrice + '元' }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="类型" prop="goodsType" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              <span v-if="scope.row.goodsType == 'lease'">租赁</span>-->
    <!--              <span v-else>售卖</span>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="运费" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>-->
    <!--              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>-->
    <!--              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>-->
    <!--              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>-->
    <!--              <p>{{ scope.row.freightPrice }}</p>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="优惠" />-->
    <!--          <el-table-column label="租期" prop="leaseDay" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ scope.row.leaseDay }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="合计" prop="totalPrice" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ '￥' + scope.row.totalPrice }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--        </el-table>-->
    <!--        <div class="ele-bzm">-->
    <!--          <p>备注:{{ item.remark || '无备注' }}</p>-->
    <!--          <p class="ele-p-right">-->
    <!--            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>-->
    <!--          </p>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div v-else-if="item.goodsType === 'sale'">-->
    <!--        <el-table-->
    <!--          :data="item.goodsList"-->
    <!--          class="ele-table"-->
    <!--          :header-cell-style="hearderCellStyle"-->
    <!--        >-->
    <!--          <el-table-column label="商品" prop="goodsPic" width="100" fixed="left">-->
    <!--            <template slot-scope="scope">-->
    <!--              <img-->
    <!--                :src="scope.row.goodsPic"-->
    <!--                width="80"-->
    <!--                height="80"-->
    <!--                alt="加载失败"-->
    <!--              >-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column prop="goodsName" width="250" fixed="left">-->
    <!--            <template slot-scope="scope">-->
    <!--              <div>-->
    <!--                <span>{{ scope.row.goodsName }}</span>-->
    <!--                <span-->
    <!--                  v-if="scope.row.deviceType == '1'"-->
    <!--                  class="custom"-->
    <!--                >软链</span>-->
    <!--                <span-->
    <!--                  v-if="scope.row.deviceType == '2'"-->
    <!--                  class="custom"-->
    <!--                >医柜</span>-->
    <!--              </div>-->
    <!--              <div>{{ scope.row.goodsSpec }}</div>-->
    <!--              <div>{{ scope.row.deviceNo }}</div>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="单价" prop="price" width="200">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ '￥' + scope.row.price }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="数量" prop="number" width="200">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ scope.row.number }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="押金" prop="depositPrice" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ scope.row.depositPrice + '元' }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="类型" prop="goodsType" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              <span v-if="scope.row.goodsType == 'lease'">租赁</span>-->
    <!--              <span v-else>售卖</span>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="运费" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              <p v-if="scope.row.deliverySn == 'normal'">普通配送</p>-->
    <!--              <p v-if="scope.row.deliverySn == 'self'">自提配送</p>-->
    <!--              <p v-if="scope.row.deliverySn == 'subscribe'">预约配送</p>-->
    <!--              <p v-if="scope.row.deliverySn == 'urgent'">加急</p>-->
    <!--              <p>{{ scope.row.freightPrice }}</p>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="优惠" />-->
    <!--          <el-table-column label="合计" prop="totalPrice" width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              {{ '￥' + scope.row.totalPrice }}-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="修改售价"  width="100">-->
    <!--            <template slot-scope="scope">-->
    <!--              <el-input v-model="scope.row.price"></el-input>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--        </el-table>-->
    <!--        <div class="ele-bzm">-->
    <!--          <p>备注:{{ item.remark || '无备注' }}</p>-->
    <!--          <p class="ele-p-right">-->
    <!--            <span>子订单号:{{ item.orderSn }}</span><span>门店:{{ item.storeName }}</span>-->
    <!--          </p>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { getUpdatePrice, updatePriceAndFreight } from '@/api/order'
import { Loading } from 'element-ui'
export default {
  name: 'UpdatePrice',
  data() {
    return {
      orderId: null,
      orderStore: null,
      freight: null,
      orderSn: null,
      row: null,
      receiverInfo: '',
      type: null,
      orderForm: {
        newFreight: null,
        goodsList: []
      },
      remark: null,
      show: false,
      status: '',
      // 订单详情
      OrderDetail: {},
      // 详细信息
      goodsInfo: {}
    }
  },
  mounted() {
    this.initailInfo()
  },
  activated() {
    this.initailInfo()
  },
  methods: {
    /** 发货 */
    goDelivery() {},
    initailInfo() {
      const params = this.$dd(this.$route.query.p)
      this.orderId = params.orderId
      getUpdatePrice({ orderItemId: this.orderId }).then(result => {
        console.log(result.data.data)
        this.orderStore = result.data.data.storeName
        this.freight = result.data.data.sufreightprice
        this.type = result.data.data.type
        this.orderSn = result.data.data.childOrderCode
        this.orderForm.goodsList = result.data.data.goodsInformation
      })
      // rentOrderDetail({
      //   state: params.status,
      //   orderId: params.rows.orderId
      // })
      //   .then(result => {
      //     console.log(result.data.data)
      //     this.OrderDetail = result.data.data.receiveInfo
      //     this.receiverInfo = this.OrderDetail.receiverName + ' ' + this.OrderDetail.receiverPhone + ' ' + this.OrderDetail.receiverAddress
      //     this.goodsList = result.data.data.subOrderList
      //     this.goodsInfo = result.data.data
      //   })
      //   .catch(() => {})
    },
    hearderCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      }
    },
    /** 修改价格*/
    changePrice(index) {
      this.orderForm.goodsList[index].price = this.orderForm.goodsList[index].price.replace(/[^0-9.]/g, '')
    },

    changeFreight() {
      this.orderForm.newFreight = this.orderForm.newFreight.replace(/[^0-9.]/g, '')
    },
    submitOrderForm() {
      const priceList = []
      if (!this.orderForm.newFreight) {
        return this.$message.warning('新的运费不能为空')
      } else if (!/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.orderForm.newFreight)) {
        return this.$message.warning('新运费的格式不正确')
      } else if (/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.orderForm.newFreight) && this.orderForm.newFreight > 100000) {
        return this.$message.warning('新运费的金额不能大于100000')
      } else if (/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.orderForm.newFreight) && this.orderForm.newFreight <= 0) {
        return this.$message.warning('新运费的金额不能小于0')
      }
      if (this.orderForm.goodsList.length > 0 && this.type == 'sale') {
        for (let i = 0; i < this.orderForm.goodsList.length; i++) {
          if (!this.orderForm.goodsList[i].price) {
            return this.$message.warning('商品售价不能为空')
          } else if (!/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.orderForm.goodsList[i].price)) {
            return this.$message.warning('商品售价的格式不正确')
          } else if (/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.orderForm.goodsList[i].price) && this.orderForm.goodsList[i].price > 100000) {
            return this.$message.warning('商品售价不能大于100000')
          } else if (/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.orderForm.goodsList[i].price) && this.orderForm.goodsList[i].price <= 0) {
            return this.$message.warning('商品售价不能小于0')
          } else {
            const info = {
              goodsId: this.orderForm.goodsList[i].storeGoodsId,
              price: parseFloat(this.orderForm.goodsList[i].price).toFixed(2)
            }
            priceList.push(info)
          }
        }
      }
      console.log(priceList)
      const data = {
        subOrderId: parseInt(this.orderId),
        newFreight: parseFloat(this.orderForm.newFreight).toFixed(2)
      }
      if (priceList.length > 0 && this.type == 'sale') {
        data['goodsList'] = priceList
      }
      const loadingInstance = Loading.service({ fullscreen: true })
      updatePriceAndFreight(data).then(res => {
        loadingInstance.close()
        console.log(res)
        this.$message.success('修改售价和运费成功')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }).catch(err => {
        loadingInstance.close()
        console.log(err)
      })
    }
  }

  /* beforeRouteEnter(to, from, next) {
    if (to.query.status === 701) {
      to.meta.title = '已关闭'
    } else {
      to.meta.title = '待发货'
    }
    next()
  }*/
}
</script>

<style lang="scss" scoped>
.updatePrice {
  padding: 50px 100px;
  .ele-title-2 {
    margin-top: 40px;
  }
  .ele-Payment {
    width: 50%;
    border: 2px solid #f3f3f3;
    border-radius: 5px;
    padding-left: 20px;
    p {
      padding: 5px 0px 2.5px 0px;
      color: gray;
      .p-ele-ment {
        margin-right: 15px;
      }
      .p-ele-pay {
        margin-left: 30px;
        color: black;
      }
    }
    p:last-child {
      color: black;
    }
  }
  .ele-button {
    margin: 30px 0px 30px 0px;
    .ele-btn {
      width: 100px;
    }
  }
  .ele-content-info {
    background: #f3f3f3;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
    ul,
    li {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    ul {
      padding: 20px 60px 20px 20px;
      li {
        padding: 10px 0px;
        font-size: 15px;
        display: flex;
        align-items: flex-start;
      }
      .ele-title-txt {
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;
      }
      .ele-font {
        color: gray;
      }
      .ele-font-left {
        display: inline-block;
        width: 80px;
      }
      .shdz,
      .mddz {
        display: inline-block;
        width: 300px;
      }
    }
  }

  .ele-table {
    margin-top: 40px;
    .custom {
      font-size: 12px;
      display: inline-block;
      background: #2db300;
      color: white;
      padding: 1px 5px;
    }
  }
  .ele-bzm {
    display: flex;
    justify-content: space-between;
    .ele-p-right {
      span:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
